import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:hotpot/widgets/widget_ext.dart';

import '../z_container.dart';

class TextFieldBox extends StatefulWidget {
  final String? title;
  final TextEditingController? controller;
  final ValueChanged<String>? onChanged;
  final String? hintText;
  final bool passwordMode;
  final bool must;
  final bool enable;
  final Widget? suffixIcon;
  final double? width;
  final double? height;
  final double margin;
  final int? maxLines;

  const TextFieldBox({
    super.key,
    this.title,
    this.controller,
    this.onChanged,
    this.hintText,
    this.passwordMode = false,
    this.must = false,
    this.enable = true,
    this.suffixIcon,
    this.width,
    this.height = 25,
    this.maxLines,
    this.margin = 0,
  });

  @override
  State<TextFieldBox> createState() => _TextFieldBoxState();
}

class _TextFieldBoxState extends State<TextFieldBox> {
  bool obscureText = false;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    obscureText = widget.passwordMode;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        if (widget.title != null)
          Row(
            children: [
              widget.title.text(size: 7, color: Colors.white, bold: true),
              if (widget.must) '*'.text(color: Colors.red, size: 7, bold: true),
            ],
          ),
        if (widget.title != null) 4.hSizedBox,
        ZContainer(
          width: widget.width,
          height: widget.height,
          side: const BorderSide(color: Color(0xFF393C49), width: 1),
          radius: 5,
          color: const Color(0xFF1F1D2B),
          child: Row(
            children: [
              TextField(
                enabled: widget.enable,
                decoration: InputDecoration(
                  hintText: widget.hintText,
                  border: InputBorder.none,
                  // border: const OutlineInputBorder(borderSide: BorderSide(color: Color(0xFFE1E3ED))),
                  contentPadding: EdgeInsets.only(left: 12.r, right: 12.r),
                  hintStyle: TextStyle(color: Colors.white.withOpacity(0.6)),
                ),
                style: const TextStyle(color: Colors.white),
                maxLines: obscureText ? 1 : widget.maxLines,
                obscureText: obscureText,
                controller: widget.controller,
                onChanged: widget.onChanged,
              ).expanded(),
              widget.passwordMode ? _eye() : _suffixIcon(),
              // 12.wSizedBox,
            ],
          ),
        ),
      ],
    ).paddingSymmetric(horizontal: widget.margin);
  }

  Widget _eye() {
    return (obscureText ? const Icon(Icons.remove_red_eye) : const Icon(Icons.key_off_outlined))
        .gestureDetector(onTap: () => setState(() => obscureText = !obscureText));
  }

  _suffixIcon() {
    return widget.suffixIcon ?? const SizedBox();
  }
}
